<template>
    <div>
        <el-row>
                    <el-button
          type="primary"
          plain
          icon="el-icon-upload"
          size="mini"
          @click="handleAdd('add',true)"
          v-hasPermi="['cmdb:savefile:post']"
        >新增维修记录 
        </el-button>
        </el-row>
        
               <el-table v-loading="loading" :data="list" :header-cell-style="{'text-align':'center'}">
      <el-table-column type="selection" width="20" align="center"/>
      <el-table-column label="序号" align="center" type="index"/>
      <el-table-column label="问题描述" align="center" width="300"  prop="_source.desc"/>
      <el-table-column label="维修方案" align="left"   prop="_source.plan" :show-overflow-tooltip="true"/>
      <el-table-column label="信息录入" align="center" width="100" prop="_source.S-creator"/>
      <el-table-column label="创建时间" align="center" width="180"  >
        <template slot-scope="scope">
          <span>{{scope.row._source["S-creation-time"] | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-row :gutter="6" class="mb8">
             <el-col :span="1.5">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleView(scope.row)"
                v-hasPermi="['admin:system:operlog:get']"
              >详情
              </el-button>
              </el-col>
              <el-col :span="1.5">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-help"
                @click="handleAdd(scope.row,false)"
                v-hasPermi="['admin:system:operlog:get']"
              >编辑
              </el-button>
              </el-col>
                            <el-col :span="1.5">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-help"
                @click="handleDel(scope.row)"
                v-hasPermi="['admin:system:operlog:get']"
              >删除
              </el-button>
              </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
          <el-pagination
        style="float: right; margin-right: 100px"
        background
        layout="total, prev, pager, next"
        :page-size="page_size"
        :total="total"
        :current-page.sync="current_page"
        @current-change="on_page_change"
      >
      </el-pagination>
          <el-dialog
      title="维修记录"
      width="550px"
      :visible.sync="is_visible"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
          <el-form
        ref="dataform"
        label-width="80px"
        label-position="left"
      >
        <el-form-item
          label="问题描述"
        >
                <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="prob.desc"
        maxlength="200"
        show-word-limit
        >
        </el-input>
        </el-form-item>
                <el-form-item
          label="维修方案"
        >
            <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="prob.plan"
            :rows="10"
            maxlength="500"
            show-word-limit
            size="small"
            >
            </el-input>
        </el-form-item>

      </el-form>

            <center>
      <el-form label-width="0px" style="margin-right: 30px align:center">
      <el-form-item>
        <el-button size="small" style="width: 20%" type="primary" @click="on_submit()">提交</el-button>
        <el-button size="small" style="width: 20%" type="info"  @click="on_close()" >取消</el-button>
      </el-form-item>
    </el-form>
    </center>
    </el-dialog>
              <el-dialog
      title="维修记录"
      width="550px"
      :visible.sync="is_visible_detail"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
          <el-form
        ref="dataform"
        label-width="90px"
        label-position="left"
      >
        <el-form-item
          label="问题描述："
        >
        {{detail.desc}}
        </el-form-item>
                <el-form-item
          label="维修方案："
        >
        <p  v-html="detail.plan"> {{ detail.plan }}</p>

        <!-- {{detail.plan}} -->
        </el-form-item>
                                <el-form-item
          label="创建用户："
        >
         {{detail["S-creator"]}}
        </el-form-item>
                        <el-form-item
          label="创建日期："
        >
         {{detail["S-creation-time"] | formatDate}}
        </el-form-item>
      </el-form>
    </el-dialog>
    </div>
</template>

<script>
import { addRepair, delRepair, listRepair,updateRepair } from "@/api/vadmin/cmdb/repair";

export default {
  name: "repair",
  props: ['es_id'],
  data() {
    return {
        list:[],
        loading:false,
        current_page:1,
        total:0,
        page_size:10,
        is_visible_detail:false,
        is_visible:false,
        prob:{},
        detail:{},
        update_data:{},
        temp:{},
        edit_or_update:true,


    };
  },
    mounted(){

  },
  created() {
    this.getList()
  },
  methods: {
      on_page_change(val){

      },
      handleView(row){
        this.detail=row._source
        this.is_visible_detail=true
      },
      handleAdd(row,edit_or_update){
        if (edit_or_update==true){
          this.edit_or_update=edit_or_update
          this.prob={}
          this.is_visible=true;
        }else{
          this.edit_or_update=edit_or_update
          this.update_data=row
          this.prob=row._source
          this.is_visible=true;
        }
      },
      handleDel(row){
      this.$confirm('是否确定删除此条记录？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delRepair({id:row._id});
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch((err) => {});
    },
        
      on_submit(){
        if (this.edit_or_update==true){
        this.prob["plan"] = this.preText(this.prob.plan);
        this.prob["S-data-id"]=this.es_id["_id"]
        addRepair(this.prob).then(response=>{
          this.getList()
          this.is_visible=false
        })
        }else{
          this.update_data._source=this.prob
          console.log("更新")
          updateRepair(this.update_data).then(response=>{
            this.getList()
            this.is_visible=false
            console.log(response)
          })
        }

      },
      getList(){
        console.log('=======')
        listRepair({page:1,id:this.es_id["_id"]}).then(response=>{
          if (this.list==response.msg.hits.hits){
             this.getList()
          }else{
             this.list=response.msg.hits.hits
          }
        })
      },
      on_close(){
          this.is_visible=false;
      },
      
preText (pretext) {
    return pretext.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;')

  },}
};
</script>

<style lang="scss" scoped>

</style>
